<template>
	<view class="interest">

		<view class="content" v-for="(category, index) in categories" :key="index">
			<view class="contentPart">
				<view class="title">
					{{
                      category.level1.categoryName
                        }}
				</view>
				
				<view class="select">
					<button v-for="(item, index) in category.level2" :key="index" @click="toggleButton(item.id)"
						:class="actives.includes(item.id) ? 'selected' : ''">
						{{ item.categoryName  }}
					</button>
				</view>
			</view>
		</view>
		<view class="fill">

		</view>
		<view class="bottom">
			<button @click="save"> 选好了 (已选 {{actives.length}} / {{level2Length}}) </button>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue'
	import {
		navBarHeight
	} from '../../utils/system'
	import apis from '../../api/apis'
	const count = ref(0)
	const title = ref([])
	// const selectedInterests = ref(new Set())

	// const isSelected = (interest)=> selectedInterests.value.has(interest)
	// const selectedInterestsCount = computed(()=>selectedInterests.value.size)
	// const toggleInterest = (interest)=> {  
	//  console.log(selectedInterests.value)
	//     if (isSelected(interest)) {  
	//       selectedInterests.value.delete(interest);  
	//     } else {  
	//       selectedInterests.value.add(interest);  
	//     }  
	//   }

	// 用来接收兴趣标签
	const categories = ref([])
	// 获取所有兴趣分类标签
	const getAllTags = () => {
		apis.getAllTags().then((res) => {
			categories.value = res.data
			console.log(categories.value)
			// 计算所有 level2 元素的总长度
			totalLevel2Length();

		})
	}
 

	const level2Length = ref();
	const totalLevel2Length = () => {


	let totalLength = 0;

	categories.value.forEach(item => {
		if (item.level2 && Array.isArray(item.level2)) {
			totalLength += item.level2.length;
		}
		
	});
	console.log(totalLength);
	level2Length.value = 	totalLength

	}


	// 更新选择的按钮状态
	const actives = ref([])
	const save = () => {
		// 用户选择的兴趣标签传给后端
		apis.interestTag(actives.value).then(() => {
			// console.log("保存成功");
		})

		// 获取用户当前选择兴趣的标签
// getUserSelectInterest()  //不能在这里执行 是首页用呢！

		// 选择完毕后 跳转回到首页
		// 我的设想是 因为从首页跳转到兴趣页,首页还没有被销毁,
		// 所以从兴趣页跳转回去,不用把页面重新加载,只需要把兴趣重新获取一下
		// 我草 多余了,下面这种跳转回去 页面数据全部重新加载了
		uni.reLaunch({
			url:"/pages/main/main",
			
		})
	}
	// 获取用户当前选择兴趣的标签
	const getUserSelectInterest = () => {
		apis.interestTagSelect().then(res => {
			// intersetCatArr.value = res.data.data
			// 获取用户选择的兴趣标签的id
			// actives.value = intersetCatArr.value.map((item) => item.id);
			actives.value = res.data.map((item) => item.id);
			console.log(actives.value)
		})
	}
	// 点击选择兴趣标签
	const toggleButton = (buttonId) => {
		// 检查按钮ID是否存在于激活状态数组中
		const isActive = actives.value.includes(buttonId)

		// 如果按钮是激活状态，则移除；否则添加
		if (isActive) {
			actives.value = actives.value.filter((id) => id !== buttonId);

		} else {
			actives.value.push(buttonId)
			// 给所选择的按钮统计个数
		}
	}



	
		getAllTags();

	getUserSelectInterest();
</script>

<style lang="scss" scoped>
	.interest {
		padding: 0 30rpx;

		.content {
			.contentPart {
				.title {
					padding-top: 30rpx;
					font-size: 35rpx;
				}

				.select {
					// height: 50rpx;
					margin-top: 30rpx;
					display: grid;
					gap: 15rpx;
					grid-template-columns: repeat(3, 1fr);

					button {
						width: 200rpx;
						height: 90rpx;
						font-size: 25rpx;
						line-height: 90rpx;
						border-color: darkgray;
						color: darkgray;
					}

					.selected {
						background-color: rgba(#84ddff, 0.3);
						border-color: rgba(22, 93, 255, 1);
						color: rgba(22, 93, 255, 1);
					}
				}
			}
		}

		.fill {
			height: 12vh;
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 11vh;
			background-color: white;
			border-top: 1rpx solid rgba(240, 230, 250, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 30rpx;

			button {
				width: 90vw;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
				background-color: rgba(22, 93, 255, 1);
				color: white;
			}
		}
	}
</style>